{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}" />
  {% if cl.formset %}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}" />
  {% endif %}
  {% if cl.formset or action_form %}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {width: inherit}
    </style>
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
  {% block breadcrumbs %}
    <ol class="breadcrumb">
      <li class="home">
        <a href="{% url 'admin:index' %}" title="{% trans 'Home' %}"><span class="glyphicon glyphicon-home"></span></a>
      </li>
      <li>
        <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
      </li>
      <li class="active">{{ cl.opts.verbose_name_plural|capfirst }}</li>
    </ol>
  {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}

{% block filters %}
  {% if cl.has_filters %}
    <div id="changelist-filter">
      <h2 class="h4">{% trans 'Filter' %}</h2>
      {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
    </div>
  {% endif %}
{% endblock %}

{% block content %}
  <div id="content-main">
    {% if cl.formset.errors %}
      <div role="alert" class="errornote alert alert-warning fade in">
        <button data-dismiss="alert" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">{% trans "Close" %}</span></button>
        {% blocktrans count cl.formset.total_error_count as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
        {{ cl.formset.non_form_errors }}
      </div>
    {% endif %}
    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
      <div class="panel panel-default">
        <div class="panel-heading" id="panel-heading">
          {% if cl.search_fields %}
            {% block search %}{% search_form cl %}{% endblock %}
          {% else %}
            <span class="title"><span class="glyphicon glyphicon-th-list"></span> {{ cl.opts.verbose_name_plural|capfirst }}</span>
          {% endif %}
          {% block object-tools %}
            {% if has_add_permission %}
              <ul class="object-tools pull-right">
                {% block object-tools-items %}
                  <li>
                    <a href="#panel-footer" class="btn btn-default btn-xs" role="button">
                      <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                  </li>
                  <li>
                    {% url cl.opts|admin_urlname:'add' as add_url %}
                    <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink btn btn-primary btn-xs" title="{% blocktrans with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktrans %}" data-placement="left" data-toggle="tooltip" role="button">
                      <span class="glyphicon glyphicon-plus"></span>
                    </a>
                  </li>
                {% endblock %}
              </ul>
            {% endif %}
          {% endblock %}
        </div>

        <form id="changelist-form" action="" method="post"{% if cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}
          {% block result_list %}
            <div class="place-info-actions">
              <div class="progressbar-selected-rows"></div>
            </div>
            <div class="panel-body actions-top">
              <div class="row">
                <div class="col-sm-5 select">
                  {% if action_form and actions_on_top and cl.full_result_count %}
                    {% admin_actions %}
                  {% endif %}
                </div>
                <div class="col-sm-7 date-hierarchy">
                  {% block date_hierarchy %}
                    {% date_hierarchy cl %}
                  {% endblock %}
                </div>
              </div>
            </div>
            {% result_list cl %}
            {% if cl.result_count > cl.list_per_page or actions_on_bottom and cl.full_result_count %}
              <div class="panel-body actions-bottom">
                <div class="row">
                  {% if action_form and actions_on_bottom and cl.full_result_count %}
                    <div class="col-sm-4">
                        {% admin_actions %}
                    </div>
                  {% endif %}
                  <div class="{% if action_form and actions_on_bottom and cl.full_result_count %}col-sm-8{% else %}col-sm-12{% endif %}">
                    {% block pagination %}{% pagination cl %}{% endblock %}
                  </div>
                </div>
              </div>
            {% endif %}
          {% endblock %}
          <div class="panel-footer" id="panel-footer">
            <span class="info pull-left">
              {{ cl.result_count }}
              {% if cl.result_count == 1 %}
                {{ cl.opts.verbose_name }}
              {% else %}
                {{ cl.opts.verbose_name_plural }}
              {% endif %}
            </span>
            <div class="right-buttons">
              <a href="#panel-heading" class="btn btn-default btn-xs" role="button">
                <span class="glyphicon glyphicon-chevron-up"></span>
              </a> 
              {% if cl.formset and cl.result_count %}
              <input type="submit" name="_save" class="save btn btn-primary btn-xs" value="{% trans 'Save' %}"/>
              {% endif %}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}


{% block js %}
  <script>
    (function ($) {
      $('.object-tools .btn').tooltip({'container':'body'});
      $('#result_list .vTextField').addClass('form-control');
      $('#toolbar .popover-dismiss').popover({
        trigger: 'focus',
        container: 'body',
        title: '',
        content:$('.popover-search-info').html(),
        html:true,
        hide:600
      }).focus();

      // checkbox progressbar
      $checkboxes = $('#result_list .action-checkbox input');
      var COUNT_ITEMS = $checkboxes.length;
      $checkboxes.on('click', function () {
        checked = $('#result_list .action-checkbox input:checked').length;
        width = (checked * 100) / COUNT_ITEMS;
        $('.progressbar-selected-rows').width(width + '%');
      });
      $('#action-toggle').on('click', function () {
        if ($(this).is(':checked')) {
          $('.progressbar-selected-rows').width('100%');
        } else {
          $('.progressbar-selected-rows').width(0);
        }
      });
      $('.info-actions .clear').on('click', function () {
        $('.progressbar-selected-rows').width(0);
      });

      // if not using date hierarchy filters
      if (!$('.date-hierarchy').find('.toplinks').length) {
        $('.panel-body.actions-top').addClass('no-hierarchy-filters');
      }
    })(django.jQuery);
  </script>
{% endblock js %}
